﻿<!DOCTYPE HTML>
<html>
<head>
  <style>
    #bkgnd {
      background:url("img/bkgnd.jpg") no-repeat;
      background-position: top center;
      background-size: 1536px 765px;;
    }
  </style>
  <script src="js/cumquat.js"></script>
</head>

<body id="bkgnd" onselectstart="return false">
  <title>金桔龟测试页</title>

  <div style="text-align: center;">
    <h3>金桔龟测试页</h3>
    <canvas id="mainCanvas" width="1126" height="600" style="border:1px solid #c3c3c3;">
      SORRY! Your browser does not support the canvas element.
    </canvas>
  </div>

  <!-- 设置一个隐藏节点，用于存放图片资源以及 json_data 等内容 -->
  <div id='hidden' style="display:none">
  </div>

  <script type="text/javascript">

    //加载所需资源，装入一个隐藏节点中
    function LoadJsonData(json_uri, node_name, fn_callback){
      let node_id = "data_" + node_name
      let node = document.getElementById(node_id)
      if (node){
        document.body.removeChild(node)
      }
      let data_source = document.createElement('script')
      data_source.setAttribute("type", "text/javascript")
      data_source.setAttribute("id", node_id)
      data_source.src = json_uri
      data_source.onload = function(){
        fn_callback(json_data)
      }
      let hidden_div = document.getElementById("hidden")
      hidden.appendChild(data_source)
    }

    // 加载所需图片
    function LoadImage(img_uri, fn_callback){
      let img = new Image()
      img.onload = function(){
        fn_callback(img)
      }
      img.src = img_uri
      let hidden_div = document.getElementById("hidden")
      hidden.appendChild(img)
    }

    // 图形界面系统所需资源
    var json_CQStyle = null
    var json_IsKandel = null
    var json_Topol_M = null
    var json_nations = null
    var img_IsKander = null
    var img_Topol_M = null
    var img_terrain = null

    // 初始化图形界面系统
    function InitGUI(){

      // 初始化 CumquatGUI 系统
      let canvas = document.getElementById("mainCanvas")
      let cq = CQGUI.init(canvas)

      // 解开下面这句，试试另一种风格的皮肤
      cq.LoadStyle(json_CQStyle)

      // 主窗口打算画成下面这个样子
      // ___________________________________________________________
      // |btn：我方态势|            info_text          |btn：展示控件|  top_layout_btns
      // |￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣|￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣|
      // |                             |                           |
      // |                             |                           |
      // |                             |                           |
      // |        我方地图              |          敌方地图          |   mid_layout_map
      // |                             |                           |
      // |                             |                           |
      // |                             |                           |
      // |_____________________________|___________________________|
      // |check:部署 |check:部署 |check:部署 |check:部署 |check:部署 |
      // |           |          |           |          |           |
      // | img_label |img_label | img_label |img_label | img_label |   btm_layout_units
      // |    _______|  ________|   ________|   _______|    _______|
      // |   |btn:换 |  |btn:换 |   |btn:换 |   |btn:换 |   |btn:换 |
      // ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
      // 根布局器，即桌面
      let root_layout = cq.GetRootLayout(LAYOUT_TYPE_VERT)
      // 顶部按钮栏
      let top_layout_btns = cq.AddLayout(root_layout, LAYOUT_TYPE_HZTL, LAYOUT_STG_KEEP_LEFT_OR_UP, "5%")
      // 底部小队栏
      let btm_layout_units = cq.AddLayout(root_layout, LAYOUT_TYPE_HZTL, LAYOUT_STG_KEEP_RIGHT_OR_DOWN, "30%")
      // 中间地图栏
      let mid_layout_map = cq.AddLayout(root_layout, LAYOUT_TYPE_HZTL, LAYOUT_STG_FILL_EMPTY)
      // 我方态势按钮
      let layout_btn_our_situ = cq.AddLayout(top_layout_btns, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
      // 展示控件按钮
      let layout_btn_show_controls = cq.AddLayout(top_layout_btns, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_RIGHT_OR_DOWN, "20%")
      // 信息按钮
      let layout_label_info = cq.AddLayout(top_layout_btns, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)
      // 我方地图区域
      let layout_area_our_map = cq.AddLayout(mid_layout_map, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "50%")
      // 敌方地图区域
      let layout_area_emy_map = cq.AddLayout(mid_layout_map, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)
      // 小队1-5
      let layout_unit_1 = cq.AddLayout(btm_layout_units, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
      let layout_unit_2 = cq.AddLayout(btm_layout_units, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
      let layout_unit_3 = cq.AddLayout(btm_layout_units, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
      let layout_unit_4 = cq.AddLayout(btm_layout_units, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
      let layout_unit_5 = cq.AddLayout(btm_layout_units, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)

      // 在布局器中添加控件
      let btn_our_situ = cq.AddButton(layout_btn_our_situ, "我方态势")
      let btn_show_controls = cq.AddButton(layout_btn_show_controls, "展示控件")
      let lbl_info =  cq.AddTxtLabel(layout_label_info, "部署军队，然后开战", LABEL_TXT_CENTER, 'rgb(0,0,0)')
      let wnd_our_map = cq.AddWindow(layout_area_our_map)
      let wnd_emy_map = cq.AddWindow(layout_area_emy_map)
      let box_unit1 = cq.AddBoxOnLayout(layout_unit_1, "1小队")
      let box_unit2 = cq.AddBoxOnLayout(layout_unit_2, "2小队")
      let box_unit3 = cq.AddBoxOnLayout(layout_unit_3, "3小队")
      let box_unit4 = cq.AddBoxOnLayout(layout_unit_4, "4小队")
      let box_unit5 = cq.AddBoxOnLayout(layout_unit_5, "5小队")

      // 定义小队信息面板，以及相对应的处理函数
      function InitUnitBox(box){
        let in_layout = box.GetInnerLayout()
        let layout_chk = box.AddLayout(in_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
        let layout_bottom = box.AddLayout(in_layout, LAYOUT_TYPE_HZTL, LAYOUT_STG_KEEP_RIGHT_OR_DOWN, "20%")
        let layout_img = box.AddLayout(in_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)
        let layout_label = box.AddLayout(layout_bottom, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "60%")
        let layout_btn = box.AddLayout(layout_bottom, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)

        let chk_deploy = box.AddCheck(layout_chk, "部署", false)
        let img_weapon = box.AddImgLabel(layout_img, img_IsKander, LABEL_IMG_STRETCHED, {w: 220, h: 100})
        let lbl_weapon = box.AddTxtLabel(layout_label, "IsKander", LABEL_TXT_CENTER, 'rgb(0,0,0)')
        let btn_change = box.AddButton(layout_btn, "换装备")

        chk_deploy.OnClick = function(){
          chk_deploy.DoFlipCheck()//翻转选中状态
        }

        btn_change.OnClick = function(){
          if (img_weapon.img == img_IsKander){
            img_weapon.img = img_Topol_M
            lbl_weapon.txt = "Topol_M"
          }
          else{
            img_weapon.img = img_IsKander
            lbl_weapon.txt = "IsKander"
          }
          cq.PushPaintTask(box)
        }

        img_weapon.OnClick = function(){
          //弹出武器参数对话框
          let rc = cq.GetCenterRect(300, 330, -200, -70)
          let box = cq.AddIndependentBox(rc, lbl_weapon.txt)
          let layout_img = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, 100)
          let layout_intro = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)

          let img_weapon = box.AddImgLabel(layout_img, this.img, LABEL_IMG_CENTERED, {w: 220, h: 100})
          let intro = (lbl_weapon.txt == "IsKander") ? json_IsKandel : json_Topol_M
          let lst_intro = box.AddList(layout_intro, LIST_ITEM_CLICK_MSG, intro)
        }
      }

      InitUnitBox(box_unit1)
      InitUnitBox(box_unit2)
      InitUnitBox(box_unit3)
      InitUnitBox(box_unit4)
      InitUnitBox(box_unit5)

      // 为控件添加事件处理函数
      btn_our_situ.OnClick = function(){
        alert ("你按下了‘我方态势’按钮")
      }
      btn_show_controls.OnClick = function(){
        //弹出展示控件对话框
        let rc = cq.GetCenterRect(300, 320, -50, -70)
        let box = cq.AddIndependentBox(rc, "CumquatGUI 控件展示")
        let layout_btn2 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "12%")
        let layout_separater1 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "4%")
        let layout_spin = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
        let layout_separater2 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "4%")
        let layout_prgs = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
        let layout_separater3 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "4%")
        let layout_label = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "10%")
        let layout_combo1 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "12%")
        let layout_separater4 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "4%")
        let layout_combo2 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "12%")

        let btn_new_box = box.AddButton(layout_btn2, "弹出对话框")
        btn_new_box.OnClick = function(){
          let rc2 = cq.GetCenterRect(300, 260, 50, -70)
          cq.AddIndependentBox(rc2, "又一个对话框")
        }
        let test_spin = box.AddSpin(layout_spin, 0.5, 1, 0.1)
        let test_prgs = box.AddPrgsBar(layout_prgs, "当前进度 |%", 50)
        test_spin.OnValueChange = function(val){
          test_prgs.DoSetPrgs(val * 100)
        }

        let desc_label = box.AddTxtLabel(layout_label, "选国家，选城市：", LABEL_TXT_LEFT,)
        let test_combo1 = box.AddCombo(layout_combo1, json_nations[0], -1, 6)
        let test_combo2 = box.AddCombo(layout_combo2, json_nations[1], -1, 6)
        test_combo1.DoSelect(0)
        test_combo2.DoSelect(0)
        test_combo1.OnChange = function(index){
          test_combo2.SetContent(json_nations[index + 1])
          test_combo2.DoSelect(0)
        }
      }

      //覆盖窗口的绘图函数
      wnd_our_map.DrawSelf = function(ctx){
        this.DrawFrame(ctx, 1, "black")
        this.DrawImage(ctx, 0, 0, this.rc.w, this.rc.h, img_terrain, 0, 0)
      }

      wnd_emy_map.DrawSelf = function(ctx){
        this.DrawFrame(ctx, 1, "black")
        this.DrawImage(ctx, 0, 0, this.rc.w, this.rc.h, img_terrain, 300, 0)
      }

      // 测试代码，看看各个布局器的位置
      //root_layout.DrawLayout(cq.ctx)
      //box_unit1.inner_layout.DrawLayout(cq.ctx)
      //box_unit2.inner_layout.DrawLayout(cq.ctx)
      //box_unit3.inner_layout.DrawLayout(cq.ctx)
      //box_unit4.inner_layout.DrawLayout(cq.ctx)
      //box_unit5.inner_layout.DrawLayout(cq.ctx)

      // 刷新界面
      cq.DrawAll()
    }

    // 在启动 CumquatGUI 系统之前，先加载所需资源
    window.onload = function(){
      LoadJsonData("data/mono_style.json", "style", function(data_source){
        json_CQStyle = Object.create(data_source)//深拷贝
        LoadJsonData("data/intro_IsKander_zh.json", "IsKander", function(data_source){
          json_IsKandel = Object.create(data_source)//深拷贝
          LoadJsonData("data/intro_Topol_M_zh.json", "Topol_M", function(data_source){
            json_Topol_M = Object.create(data_source)//深拷贝
            LoadJsonData("data/nations_zh.json", "nations", function(data_source){
              json_nations = Object.create(data_source)//深拷贝

              LoadImage("img/IsKander.png", function(img){
                img_IsKander = img
                LoadImage("img/Topol_M.png", function(img){
                  img_Topol_M = img
                  LoadImage("img/terrain.jpg", function(img){
                    img_terrain = img

                    // 初始化图形界面系统
                    InitGUI()
                    // 启动 CQGUI 事件处理系统
                    CQGUI.instance.Start()
                  })
                })
              })
            })
          })
        })
      })
    }
  </script>
</body>
</html>
